<template>
    <ContentBox title="数字农场">
        <div class="digitafarmLeft">
            <div class="left">
                <div class="left">
                    <div class="top">
                        <div class="small-header">
                            <div>【梁寨智慧农场】</div>
                            <div></div>
                        </div>
                        <div class="hl_content">
                            <div>
                                <span>
                                    <img src="../../assets/image/zhuyaozuowu.png" alt="">
                                    主要作物
                                </span>
                                <span>{{ lianzhainongchang.farmCropName }}</span>
                            </div>
                            <div>
                                 <span>
                                    <img src="../../assets/image/zuowuchanliang.png" alt="">
                                    作物产量
                                </span>
                                <span>{{ lianzhainongchang.farmCropYield }}吨</span>
                            </div>
                            <div>
                                 <span>
                                    <img src="../../assets/image/mianji.png" alt="">
                                    面积大小
                                </span>
                                <span>{{lianzhainongchang.farmArea}}公顷</span>
                            </div>
                        </div>
                        <div class="farm-bottom">
                            <div>
                                <div class="hl-red">
                                    <span class="digiter-number hl-red">{{lianzhainongchang.farmCropArea}}</span>公顷
                                </div>
                                <div>
                                    种植规模
                                </div>
                            </div>
                            <div>
                                <div class="hl-green">
                                    <span class="digiter-number hl-green">{{lianzhainongchang.farmCropYield}}</span>吨
                                </div>
                                <div>
                                    作物产量
                                </div>
                            </div>
                            <div>
                                <div class="hl-zi">
                                    <span class="digiter-number hl-zi">
                                        {{lianzhainongchang.farmQuarter}}
                                    </span>
                                </div>
                                <div>
                                    每年季度
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="small-header" style="margin-top: 40px;">
                            <div>【京东农场】</div>
                            <div></div>
                        </div>
                        <div class="hl_content">
                            <div>
                                <span>
                                    <img src="../../assets/image/zhuyaozuowu.png" alt="">
                                    主要作物
                                </span>
                                <span>{{ jingdongnongchang.farmCropName }}</span>
                            </div>
                            <div>
                                 <span>
                                    <img src="../../assets/image/zuowuchanliang.png" alt="">
                                    作物产量
                                </span>
                                <span>{{ jingdongnongchang.farmCropYield }}吨</span>
                            </div>
                            <div>
                                 <span>
                                    <img src="../../assets/image/mianji.png" alt="">
                                    面积大小
                                </span>
                                <span>{{jingdongnongchang   .farmArea}}公顷</span>
                            </div>
                        </div>
                        <div class="farm-bottom">
                            <div>
                                <div class="hl-red">
                                    <span class="digiter-number hl-red">{{jingdongnongchang.farmCropArea}}</span>公顷
                                </div>
                                <div>
                                    种植规模
                                </div>
                            </div>
                            <div>
                                <div class="hl-green">
                                    <span class="digiter-number hl-green">{{jingdongnongchang.farmCropYield}}</span>吨
                                </div>
                                <div>
                                    作物产量
                                </div>
                            </div>
                            <div>
                                <div class="hl-zi">
                                    <span class="digiter-number hl-zi">
                                        {{jingdongnongchang.farmQuarter}}
                                    </span>
                                </div>
                                <div>
                                    每年季度
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="right">
                    <div class="top">
                        <div class="small-header">
                            <div>【作物信息】</div>
                            <div>
                                <el-checkbox-group v-model="checkListzuowuxinxi">
                                    <el-checkbox label="梁寨智慧农场"></el-checkbox>
                                    <el-checkbox label="京东农场"></el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                        <Zuowuxinxi :options="zuwuxinxiEcharts"></Zuowuxinxi>
                        <!--<Demo></Demo>-->
                    </div>
                    <div class="bottom">
                        <div class="small-header">
                            <div>【各类作物产量与销售额占比】</div>
                            <div>
                                <el-checkbox-group v-model="checkListxiaoshouezhanbi">
                                    <el-checkbox label="梁寨智慧农场"></el-checkbox>
                                    <el-checkbox label="京东农场"></el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                        <div style="flex: 1">
                            <zuowuchanlinag :options="xiaoshouezhanbi"></zuowuchanlinag>
                        </div>
                    </div>
                </div>
            </div>

            <div class="right">
                <div class="small-header">
                    <div>【年度产量趋势与年度销售额趋势】</div>
                    <div>

                    </div>
                </div>
                <div class="banner">

                    <div class="banner_content">
                        <div>
                            <div style="font-size: 40px;color:#EA4746;">
                                <span style="color:#EA4746;" class="digiter-number">123</span>万吨
                            </div>
                            <div style="font-size:30px;">本年度总产量</div>
                        </div>
                        <div>
                            <div style="font-size: 40px;color:#00C5C4;">
                                <span style="color:#00C5C4;" class="digiter-number">123</span>万吨
                            </div>
                            <div style="font-size:30px;">本年度总产量</div>
                        </div>
                    </div>

                    <div class="banner_content">
                        <div>
                            <div style="font-size: 40px;color:#EA4746;">
                                <span style="color:#EA4746;" class="digiter-number">123</span>万吨
                            </div>
                            <div style="font-size:30px;">本年度总产量</div>
                        </div>
                        <div>
                            <div style="font-size: 40px;color:#00C5C4;">
                                <span style="color:#00C5C4;" class="digiter-number">123</span>万吨
                            </div>
                            <div style="font-size:30px;">本年度总产量</div>
                        </div>
                    </div>

                    <div class="banner_content">
                        <div>
                            <div style="font-size: 40px;color:#EA4746;">
                                <span style="color:#EA4746;" class="digiter-number">123</span>万吨
                            </div>
                            <div style="font-size:30px;">本年度总产量</div>
                        </div>
                        <div>
                            <div style="font-size: 40px;color:#00C5C4;">
                                <span style="color:#00C5C4;" class="digiter-number">123</span>万吨
                            </div>
                            <div style="font-size:30px;">本年度总产量</div>
                        </div>
                    </div>

                </div>
                <nianduchanliang></nianduchanliang>
                <!--<Demo></Demo>-->
            </div>
        </div>
    </ContentBox>
</template>

<script>
    import ContentBox from "../../components/common/ContentBox"
    import Zuowuxinxi from "./ChartsComponents/zuowuxinxi"
    import zuowuchanlinag from "./ChartsComponents/zuowuchanlinag"
    import nianduchanliang from "./ChartsComponents/nianduchangliang"
    import Demo from "../../components/common/Cahrts/coreEcharts"

    import {getShuziNongchang, getZuowuxinxi, getxiaoshouezhanbi} from "./apis"

    export default {
        data() {
            return {
                checkListzuowuxinxi: ["梁寨智慧农场", "京东农场"],
                checkListxiaoshouezhanbi: ["梁寨智慧农场", "京东农场"],
                //作物信息
                zuwuxinxiEcharts: null,
                // 销售额占比
                xiaoshouezhanbi: null,
                lianzhainongchang: {
                    farmName: "梁寨智慧农场",
                    farmCropName: "-",
                    farmCropYield: "-",
                    farmArea: "-",
                    farmCropArea: "-",
                    farmQuarter: "-"

                },
                jingdongnongchang: {
                    farmName: "京东农场",
                    farmCropName: "-",
                    farmCropYield: "-",
                    farmArea: "-",
                    farmCropArea: "-",
                    farmQuarter: "-"
                },
            }
        },
        watch: {
            "checkListzuowuxinxi": {
                handler(newval) {
                    // console.log(newval)
                    let params = {}
                    if (newval.length == 1) {
                        params = {
                            farmName: newval[0]
                        }
                    } else {
                        params = {}
                    }
                    getZuowuxinxi(params).then(res => {
                        let {data} = res
                        if (data.code == 200 && Array.isArray(data.rows) && data.rows.length) {
                            this.zuwuxinxiEcharts = data.rows;
                            // console.log(this.zuwuxinxiEcharts)
                        }
                    })
                },
                immediate: true,
                deep: true,
            },
            "checkListxiaoshouezhanbi": {
                handler(newval) {
                    // console.log(newval)
                    let params = {}
                    if (newval.length == 1) {
                        params = {
                            farmName: newval[0]
                        }
                    } else {
                        params = {}
                    }
                    getxiaoshouezhanbi(params).then(res => {
                        let {data} = res
                        if (data.code == 200 && Array.isArray(data.rows) && data.rows.length) {
                            this.xiaoshouezhanbi = data.rows;
                            console.log(this.zuwuxinxiEcharts)
                        }
                    })
                },
                immediate: true,
                deep: true,
            },
        },
        components: {
            ContentBox,
            Zuowuxinxi,
            zuowuchanlinag,
            nianduchanliang,
            Demo,

        },
        mounted() {
            // 获取 数字农场概览
            getShuziNongchang().then(res => {
                console.log(res)
                let {data} = res
                if (data.code == 200 && Array.isArray(data.rows) && data.rows.length > 0) {
                    // this
                    data.rows.forEach(ele => {
                        if (ele.farmName == "梁寨智慧农场") {
                            Object.keys(this.lianzhainongchang).forEach(item => {
                                this.lianzhainongchang.farmCropName = ele.farmCropName
                                this.lianzhainongchang.farmCropYield = ele.farmCropYield
                                this.lianzhainongchang.farmArea = ele.farmArea
                            })
                            console.log(this.lianzhainongchang)
                        } else {
                            Object.keys(this.jingdongnongchang).forEach(item => {
                                this.jingdongnongchang.farmCropName = ele.farmCropName
                                this.jingdongnongchang.farmCropYield = ele.farmCropYield
                                this.jingdongnongchang.farmArea = ele.farmArea
                            })
                        }
                    })
                }
                // console.log(this.lianzhainongchang)
            })
        }
    }
</script>
<style lang="scss" scoped>
    @import "../../assets/style/config.scss";

    /deep/ .el-checkbox-group {
        display: flex;
        .el-checkbox {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .el-checkbox__input {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .el-checkbox__label {
            font-size: 35px;
            color: #00D3F8;
            font-family: "黑体", "Dosis", Arial, Helvetica, sans-serif;
        }
        .el-checkbox__inner {
            height: 40px;
            width: 40px;
            /*border;*/
            border: 1px solid #00D9FF;
            background: #010643;

            &::after {
                transition: transform 0s ease-in .0s;
            }

        }
        .is-checked {
            .el-checkbox__inner {
                &::after {
                    transform: rotate(45deg) scaleY(2.1);
                    box-sizing: content-box;
                    content: "";
                    border: 1px solid #00D9FF;
                    border-left: 0;
                    border-top: 0;
                    height: 10px;
                    left: 10px;
                    position: absolute;
                    top: 3px;
                    width: 10px;
                    transition: transform 0s ease-in .0s;
                    transform-origin: center;
                }

            }
        }
    }

    .hl_content {
        flex: 1;
        display: flex;
        flex-direction: column;

        > div {

            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            > span {
                flex: 1;
                font-size: 40px;

                &:first-child {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    img {
                        margin-right: 20px;
                    }
                }
                &:last-child {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                }

            }
        }
    }

    .farm-bottom {
        height: 180px;
        border-radius: 20px;
        /*border: 1px solid #ddd;*/
        background: #0E124F;
        display: flex;
        > div {
            flex: 1;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            > div {
                font-size: 40px;
                &:last-child {
                    margin-top: 20px;
                }
            }
        }
    }

    .digitafarmLeft {
        width: 100%;
        height: 100%;
        padding: 40px;

        display: flex;
        > .left {
            /*flex:1;*/
            width: 55%;
            display: flex;
            > .left {
                /*flex:1;*/
                width: 38%;
                display: flex;
                flex-direction: column;
                > div {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                }
            }
            > .right {
                flex: 1;
                margin-left: 50px;
                display: flex;
                flex-direction: column;
                > div {
                    flex: 1;
                }
                .bottom {
                    display: flex;
                    flex-direction: column;
                }
            }
        }

        > .right {
            /*flex:1;*/
            width: 45%;
            display: flex;
            margin-left: 100px;
            flex-direction: column;

            .banner {
                display: flex;
                height: 160px;
                margin-top: 10px;
                > div.banner_content {
                    background: #0D114E;
                    margin: 0 40px;
                    flex: 1;
                    display: flex;
                    border-radius: 30px;

                    > div {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        > div {
                            flex: 1;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                    }
                }
            }
        }

    }

</style>
